<template>
  <div id="app">
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
          <div class="flex items-center">
            <router-link to="/" class="text-2xl font-bold text-gray-900">GameVault</router-link>
          </div>
          
          <nav class="hidden md:flex space-x-8">
            <router-link to="/" class="text-gray-500 hover:text-gray-900 font-medium">首页</router-link>
            <router-link to="/favorites" class="text-gray-500 hover:text-gray-900 font-medium">我的收藏</router-link>
          </nav>
          
          <div class="flex items-center">
            <div v-if="isAuthenticated" class="flex items-center mr-4">
              <span class="mr-2 font-medium">{{ user.username }}</span>
              <span v-if="user.isAdmin" class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">
                管理员
              </span>
            </div>
            
            <div class="flex space-x-4">
              <router-link v-if="!isAuthenticated" to="/login" class="text-gray-500 hover:text-gray-900">登录</router-link>
              <router-link v-if="!isAuthenticated" to="/register" class="text-gray-500 hover:text-gray-900">注册</router-link>
              <router-link v-if="user.isAdmin" to="/admin/games" class="text-gray-500 hover:text-gray-900">管理</router-link>
              <button v-if="isAuthenticated" @click="logout" class="text-gray-500 hover:text-gray-900">退出</button>
            </div>
          </div>
        </div>
      </div>
    </header>
    
    <main>
      <router-view />
    </main>
    
    <footer class="bg-gray-800 text-white py-8">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 class="text-xl font-bold mb-4">GameVault</h3>
            <p class="text-gray-400">游戏内容展示平台，提供最新、最热门的游戏资讯和内容。</p>
          </div>
          
          <div>
            <h3 class="text-lg font-semibold mb-4">快速链接</h3>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-400 hover:text-white">关于我们</a></li>
              <li><a href="#" class="text-gray-400 hover:text-white">联系我们</a></li>
              <li><a href="#" class="text-gray-400 hover:text-white">隐私政策</a></li>
              <li><a href="#" class="text-gray-400 hover:text-white">使用条款</a></li>
            </ul>
          </div>
          
          <div>
            <h3 class="text-lg font-semibold mb-4">关注我们</h3>
            <div class="flex space-x-4">
              <a href="#" class="text-gray-400 hover:text-white"><i class="fa fa-facebook"></i></a>
              <a href="#" class="text-gray-400 hover:text-white"><i class="fa fa-twitter"></i></a>
              <a href="#" class="text-gray-400 hover:text-white"><i class="fa fa-instagram"></i></a>
              <a href="#" class="text-gray-400 hover:text-white"><i class="fa fa-youtube"></i></a>
            </div>
          </div>
        </div>
        
        <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
          <p>&copy; 2025 GameVault. 保留所有权利。</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAuthenticated: false,
      user: {}
    };
  },
  created() {
    this.checkAuth();
  },
  methods: {
    checkAuth() {
      const token = localStorage.getItem('token');
      const user = JSON.parse(localStorage.getItem('user'));
      
      this.isAuthenticated = !!token;
      this.user = user || {};
    },
    logout() {
      localStorage.removeItem('token');
      localStorage.removeItem('user');
      this.isAuthenticated = false;
      this.user = {};
      this.$router.push({ name: 'Home' });
    }
  }
};
</script>  